<template>
  <van-button :loading="isfollowedFalg" @click="onFollowed(aut_id)" class="follow-btn" type="info" color="#3296fa" round
    size="small" v-if="!is_followed" icon="plus">
    关注</van-button>
  <van-button :loading="isfollowedFalg" @click="onFollowed(aut_id)" class="follow-btn" round size="small" v-else>已关注
  </van-button>
</template>

<script>
import { addUserFollowed, deleteUserFollowed } from '@/api/user'

export default {
  props: {
    // 关注取消关注布尔值
    is_followed: {
      type: Boolean,
      required: true
    },
    // 用户id
    aut_id: {
      type: [Number, Object],
      required: true
    }
  },
  model: {
    prop: 'is_followed',
    event: 'updaFollowed'
  },
  data () {
    return {
      // login开启的开关
      isfollowedFalg: false
    }
  },
  methods: {
    // 取消关注添加关注
    // async onFollowed (id) {
    //   this.isfollowedFalg = true
    //   if (this.articles.is_followed) {
    //     // 当前已关注状态
    //     // console.log('取消关注')
    //     try {
    //       await deleteUserFollowed(id)
    //       // 更新视图
    //       this.articles.is_followed = false

    //       this.$toast('取消成功')
    //     } catch (err) {
    //       this.$toast('取消失败')
    //     }
    //   } else {
    //     // 当前未关注状态
    //     // console.log('添加关注')
    //     try {
    //       await addUserFollowed(id)
    //       // 更新视图
    //       this.articles.is_followed = true
    //       this.$toast('关注成功')
    //     } catch (err) {
    //       this.$toast('关注失败')
    //     }
    //   }
    //   this.isfollowedFalg = false
    // }
    async onFollowed (id) {
      this.isfollowedFalg = true
      try {
        if (this.is_followed) {
          // 当前已关注状态
          await deleteUserFollowed(id)
          this.$toast('取关成功')
        } else {
          // 当前未关注状态
          await addUserFollowed(id)
          this.$toast('关注成功')
        }
        // 同步视图
        // 子向父传值
        this.$emit('updaFollowed', !this.is_followed)
      } catch (err) {
        if (err.response && err.response.status === 400) {
          return this.$toast('禁止自己关注自己')
        }
        this.$toast('操作错误')
      }
      this.isfollowedFalg = false
    }
  },
  computed: {},
  watch: {},
  filters: {},
  components: {},
  created () { },
  mounted () { }
}
</script>

<style scoped lang='less'>
</style>
